<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix='fmt' %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<html>


<title>产品图片</title>


<script type="text/javascript">
$(function(){
	$("img.smallImage").mouseenter(function(){
		var bigImageURL = $(this).attr("bigImageURL");
		$("img.bigImg").attr("src",bigImageURL);
	});
	/*预加载*/
	$("img.bigImg").load(function(){
		$("img.smallImage").each(function(){
			var bigImageURL = $(this).attr("bigImageURL");
			img = new Image();
			img.src = bigImageURL;
		});
	});
	
	$(".buyLink").click(function(){
		var page = "forecheckLogin";
		$.get(
				page,
				function(result){
					if(result == "success"){
						var num = $(".productNumberSetting").val();
						location.href=$(".buyLink").attr("href")+"&num="+num;
					}else{
						$("#loginModal").modal("show");
					}
				}
			);
		return false;
	});
	$(".addCartLink").click(function(){
		var page = "forecheckLogin";
		$.get(
				page,
				function(result){
					if(result == "success"){
						var pid = ${product.id};
						var num = $(".productNumberSetting").val();
						var addCartpage = "foreaddCart";
						$.get(
							   addCartpage,
							   {"product.id":pid,"num":num},
							   function(result){
								   if(result == "success"){
									   $(".addCartButton").html("已加入购物车");
									   $(".addCartButton").attr("disabled","disabled");
									   $(".addCartButton").css("background-color","lightgray");
									   $(".addCartButton").css("border-color","lightgray");
									   $(".addCartButton").css("color","black");
								   }else{
									   
								   }
							   }
						);
					}else{
						$("#loginModal").modal("show");
					}
				}
			);
		return false;
	});
	
	$("button.loginSubmitButton").click(function(){
		var name = $("#name").val();
		var password = $("#password").val();
		
		if(name.length == 0 || password.length == 0){
			$("span.errorMessage").html("请输入帐号密码");
			$("div.loginErrorMessageDiv").show();
			return false;
		}
		
		var page = "foreloginAjax";
		$.get(
			page,
			{"user.name":name,"user.password":password},
			function(result){
				if(result == "success"){
					location.reload();  //页面刷新
				}else{
					$("span.errorMessage").html("帐号密码错误");
					$("div.loginErrorMessageDiv").show();
				}
			}
		);
		return true;
	});
});
</script>
<div class="imgAndInfo">
	<div class="imgInimgAndInfo">
		<img  class="bigImg" src="./img/productSingle/${product.firstProductImage.id}.jpg" />
		<div class="smallImageDiv">
			<c:forEach items="${product.productSingleImages}" var="pi">
				<img class="smallImage" src="./img/productSingle_small/${pi.id}.jpg" bigImageURL="./img/productSingle/${pi.id}.jpg" />
			</c:forEach>
		</div>
		<div class="img4load hidden" ></div> <!-- ??? -->
	</div>
	
	<div class="infoInimgAndInfo">
		<div class="productTitle">
			${product.name}
		</div>
		<div class="productSubTitle">
			 ${product.subTitle}
		</div>
		
		<div class="productPrice">
			<div class="juhuasuan">
				<span class="juhuasuanBig">聚划算</span>
				<span>此商品即将参加聚划算，<span class="juhuasuanTime">1天19小时</span>后开始</span>
			</div>
			
			<div class="productPriceDiv">
				<div class="gouwujuanDiv">
					<img src="./img/site/gouwujuan.png"/>
					<span>全天猫实物商品通用</span>
				</div>
				
				<div class="originalDiv">
					<span class="originalPriceDesc">价格</span>
					<span class="originalPriceYuan">¥</span>
					<span class="originalPrice">
						<fmt:formatNumber type="number" value="${product.originalPrice}" minFractionDigits="2" />
					</span>
				</div>
				
				
				<div class="promotionDiv">
					<span class="promotionPriceDesc">促销价</span>
					<span class="promotionPriceYuan">¥</span>
					<span class="promotionPrice">
						<fmt:formatNumber type="number" value="${product.promotePrice}" minFractionDigits="2" />
					</span>
				</div>
			</div>
		</div>
		
<script type="text/javascript">
$(function(){
	var stock = ${product.stock};
	$(".productNumberSetting").keyup(function(){
		var num = $(".productNumberSetting").val();
		num = parseInt(num);
		if(isNaN(num))   //判断是否为数字
			num = 1;
		if(num <= 0)
			num = 1;
		if(num > stock)
			num = stock;
		$(".productNumberSetting").val(num);
	});
	$(".increaseNumber").click(function(){
		var num = $(".productNumberSetting").val();
		num++;
		if(num > stock)
			num = stock;
		$(".productNumberSetting").val(num);
	});
	$(".decreaseNumber").click(function(){
		var num = $(".productNumberSetting").val();
		--num;
		if(num <=0 )
			num = 1;
		$(".productNumberSetting").val(num);
	});
});
</script>
		
		<div class="productSaleAndReviewNumber">
			<div>销量 <span class="redColor boldWord"> ${product.saleCount}</span></div>
			<div>累计评价 <span class="redColor boldWord"> ${product.reviewCount}</span></div>
		</div>
		<div class="productNumber">
			<span>数量</span>
			<span>
				<span class="productNumberSettingSpan">
					<input type="text" value="1" class="productNumberSetting" />
					
				</span>
				<span class="arrow">
					<a class="increaseNumber" href="#">
						<span class="updown">
							<img src="./img/site/increase.png"/>
						</span>
					</a>
					<span class="updownMiddle"> </span>
					<a class="decreaseNumber" href="#">
						<span class="updown">
							<img src="./img/site/decrease.png"/>
						</span>
					</a>
				</span>
			件</span>
			<span>库存 ${product.stock}件</span>
		</div>
		
		<div class="serviceCommitment">
			<span class="serviceCommitmentDesc">服务承诺</span>
			<span class="serviceCommitmentLink">
                <a href="#nowhere">正品保证</a>
                <a href="#nowhere">极速退款</a>
                <a href="#nowhere">赠运费险</a>
                <a href="#nowhere">七天无理由退换</a>
            </span>
		</div>
		
		<div class="buyDiv">
			<a href="forebuyone?product.id=${product.id}" class="buyLink"><button class="buyButton">立即购买</button></a>
            <a class="addCartLink" href="#nowhere">
            	<button class="addCartButton">
            		<span class="glyphicon glyphicon-shopping-cart"></span>加入购物车
            	</button>
            </a>
		</div>
	</div>
	<div style="clear:both"></div>
</div>
</html>